/**
 * 边框填充属性相关操作
 * @param {*} canvasRef 
 * @returns 
 */
export const useAttrs = (canvasRef) => {
  const attrs = ref({
    fill: '',
    stroke: '',
    strokeWidth: 0
  })
  const updateAttr = (type, value) => {
    attrs.value[type] = value
    const activeObj = canvasRef.value.getActiveObject()
    if (activeObj) {
      activeObj.set({ ...attrs.value })
      canvasRef.value.renderAll()
    }
  }

  const predefineColors = [
    '#ff4500',
    '#ff8c00',
    '#ffd700',
    '#90ee90',
    '#00ced1',
    '#1e90ff',
    '#c71585',
    'rgba(255, 69, 0, 0.68)',
    'rgb(255, 120, 0)',
    'hsv(51, 100, 98)',
    'hsva(120, 40, 94, 0.5)',
    'hsl(181, 100%, 37%)',
    'hsla(209, 100%, 56%, 0.73)',
    '#c7158577',
  ]

  return {
    attrs,
    updateAttr,
    predefineColors,
  }
}
